<template>
  <div class="basic-box">
    <el-form
      :model="alterForm"
      :rules="alterRules"
      ref="alterForm"
      size="small"
      label-position="right"
      label-width="auto"
    >
      <div class="basic-box-title">{{ labelData.merchantTitle }}</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="商户号:" prop="rpiNo">
            <el-input
              class="haruyuki-width-100"
              type="text"
              v-model="alterForm.rpiNo"
              @change="rpiNoChange"
              :disabled="isAlterDisabledShow"
              placeholder="请输入商户号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="变更类型:" prop="changeType">
            <el-select
              class="haruyuki-width-100"
              size="small"
              v-model="alterForm.changeType"
              @change="alterChange"
              :disabled="isAlterDisabledShow"
              placeholder="请选择变更类型"
            >
              <el-option
                v-for="item in changeTypeOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门头名称:" prop="rpiName">
            <el-input
              class="haruyuki-width-100"
              type="text"
              v-model="alterForm.rpiName"
              :disabled="isAlterDisabledShow"
              placeholder="请输入门头名称"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div
        class="basic-box-title haruyuki-mt-40"
        v-show="alterForm.rpiNo && alterForm.changeType"
      >
        {{ labelData.contentTitle }}
      </div>
      <div v-if="alterForm.rpiNo && alterForm.changeType === '0' && alterForm.basicDTO">
        <el-row :gutter="20" v-if="isBeforeAlter">
          <el-col :span="24">
            <el-divider content-position="left">变更前</el-divider>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商户简称:" prop="basicDTO.oldUserShortName">
              <span>{{ alterForm.basicDTO.oldUserShortName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人姓名:" prop="basicDTO.oldContactsName">
              <span>{{ alterForm.basicDTO.oldContactsName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人电话:" prop="basicDTO.oldContactsPhone">
              <span>{{ alterForm.basicDTO.oldContactsPhone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人邮箱:" prop="basicDTO.oldContactsEmail">
              <span>{{ alterForm.basicDTO.oldContactsEmail }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系人通讯地址:" prop="basicDTO.oldContactsAddr">
              <span>{{ alterForm.basicDTO.oldContactsAddr }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" v-if="isBeforeAlter">
            <el-divider content-position="left">变更后</el-divider>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商户简称:" prop="basicDTO.userShortName">
              <el-input
                v-model="alterForm.basicDTO.userShortName"
                placeholder="请输入商户简称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人姓名:" prop="basicDTO.contactsName">
              <el-input
                type="text"
                v-model="alterForm.basicDTO.contactsName"
                placeholder="请输入联系人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人电话:" prop="basicDTO.contactsPhone">
              <el-input
                type="tel"
                v-model="alterForm.basicDTO.contactsPhone"
                placeholder="请输入联系人电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人邮箱:" prop="basicDTO.contactsEmail">
              <el-input
                type="email"
                v-model="alterForm.basicDTO.contactsEmail"
                placeholder="请输入联系人邮箱"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系人通讯地址:" prop="basicDTO.contactsAddr">
              <el-input
                type="textarea"
                v-model="alterForm.basicDTO.contactsAddr"
                placeholder="请输入联系人通讯地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div
        v-if="
          alterForm.rpiNo && alterForm.changeType === '1' && alterForm.cardDTO
        "
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-divider content-position="left">变更前</el-divider>
          </el-col>
          <div
            v-if="
              alterForm.cardDTO.balanceAccType == '11' ||
              alterForm.cardDTO.balanceAccType == '3'
            "
          >
            <el-col :span="12">
              <el-form-item label="银行卡正面:" prop="oldAccountFrontUrl">
                <div class="upload-img">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="alterForm.cardDTO.oldAccountFrontUrl"
                    z-index="5000"
                    :preview-src-list="[alterForm.cardDTO.oldAccountFrontUrl]"
                    fit="contain"
                  >
                  </el-image>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行卡反面:" prop="oldAccountReverseUrl">
                <div class="upload-img">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="alterForm.cardDTO.oldAccountReverseUrl"
                    z-index="5000"
                    :preview-src-list="[alterForm.cardDTO.oldAccountReverseUrl]"
                    fit="contain"
                  >
                  </el-image>
                </div>
              </el-form-item>
            </el-col>
          </div>
          <div v-if="alterForm.cardDTO.balanceAccType == '3'">
            <el-col :span="12">
              <el-form-item label="非法人身份证正面:" prop="oldECardFrontUrl">
                <div class="upload-img">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="alterForm.cardDTO.oldECardFrontUrl"
                    z-index="5000"
                    :preview-src-list="[alterForm.cardDTO.oldECardFrontUrl]"
                    fit="contain"
                  >
                  </el-image>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="非法人身份证反面:" prop="oldECardReverseUrl">
                <div class="upload-img">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="alterForm.cardDTO.oldECardReverseUrl"
                    z-index="5000"
                    :preview-src-list="[alterForm.cardDTO.oldECardReverseUrl]"
                    fit="contain"
                  >
                  </el-image>
                </div>
              </el-form-item>
            </el-col>
          </div>
          <div :gutter="20" v-if="alterForm.cardDTO.balanceAccType == '21'">
            <el-col :span="24">
              <el-form-item label="开户许可证:" prop="oldOpenPermitUrl">
                <div class="upload-img">
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="alterForm.cardDTO.oldOpenPermitUrl"
                    z-index="5000"
                    :preview-src-list="[alterForm.cardDTO.oldOpenPermitUrl]"
                    fit="contain"
                  >
                  </el-image>
                </div>
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="8">
            <el-form-item label="结算卡类型:" prop="oldBalanceAccTypeName">
              <span>{{ alterForm.cardDTO.oldBalanceAccTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户行省市区:" prop="oldAccProvinceCityArea">
              <span
                >{{ alterForm.cardDTO.oldOpenAccProvince }}/{{
                  alterForm.cardDTO.oldOpenAccCity
                }}/{{ alterForm.cardDTO.oldOpenAccArea }}</span
              >
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户行名称:" prop="oldBankName">
              <span>{{ alterForm.cardDTO.oldBankName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户支行名称:" prop="oldOpenAccBankName">
              <span>{{ alterForm.cardDTO.oldOpenAccBankName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行预留手机号:" prop="oldBankMobile">
              <span>{{ alterForm.cardDTO.oldBankMobile }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-divider content-position="left">变更后</el-divider>
          </el-col>
          <div
            v-if="
              alterForm.cardDTO.balanceAccType == '11' ||
              alterForm.cardDTO.balanceAccType == '3'
            "
          >
            <el-col :span="12">
              <el-form-item label="银行卡正面:" prop="cardDTO.accountFront">
                <el-upload
                  action="/api/blade-resource/oss/endpoint/put-file-attach"
                  list-type="picture-card"
                  :http-request="httpAccountFrontRequest"
                  :limit="1"
                  :file-list="accountFrontList"
                  :on-remove="accountFrontRemove"
                  :before-remove="beforeaccountFrontRemove"
                  :on-exceed="handHeldExceed"
                  :before-upload="beforeUpload"
                  :on-preview="imgPreview"
                >
                  <i slot="default" class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行卡反面:" prop="cardDTO.accountReverse">
                <el-upload
                  action="/api/blade-resource/oss/endpoint/put-file-attach"
                  list-type="picture-card"
                  :http-request="httpAccountReverseRequest"
                  :limit="1"
                  :file-list="accountReverseList"
                  :on-remove="accountReverseRemove"
                  :before-remove="beforeaccountReverseRemove"
                  :on-exceed="handHeldExceed"
                  :before-upload="beforeUpload"
                  :on-preview="imgPreview"
                >
                  <i slot="default" class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </div>
          <div v-if="alterForm.cardDTO.balanceAccType == '3'">
            <el-col :span="12">
              <el-form-item label="非法人身份证正面:" prop="cardDTO.ecardFront">
                <el-upload
                  action="/api/blade-resource/oss/endpoint/put-file-attach"
                  list-type="picture-card"
                  :http-request="httpEcardFrontRequest"
                  :limit="1"
                  :file-list="ecardFrontList"
                  :on-remove="ecardFrontRemove"
                  :before-remove="beforeecardFrontRemove"
                  :on-exceed="handHeldExceed"
                  :before-upload="beforeUpload"
                  :on-preview="imgPreview"
                >
                  <i slot="default" class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="非法人身份证反面:"
                prop="cardDTO.ecardReverse"
              >
                <el-upload
                  action="/api/blade-resource/oss/endpoint/put-file-attach"
                  list-type="picture-card"
                  :http-request="httpEcardReverseRequest"
                  :limit="1"
                  :file-list="ecardReverseList"
                  :on-remove="ecardReverseRemove"
                  :before-remove="beforeecardReverseRemove"
                  :on-exceed="handHeldExceed"
                  :before-upload="beforeUpload"
                  :on-preview="imgPreview"
                >
                  <i slot="default" class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </div>
          <div :gutter="20" v-if="alterForm.cardDTO.balanceAccType == '21'">
            <el-col :span="24">
              <el-form-item label="开户许可证:" prop="cardDTO.openPermit">
                <el-upload
                  action="/api/blade-resource/oss/endpoint/put-file-attach"
                  list-type="picture-card"
                  :http-request="httpOpenPermitRequest"
                  :limit="1"
                  :file-list="openPermitList"
                  :on-remove="openPermitRemove"
                  :before-remove="beforeopenPermitRemove"
                  :on-exceed="handHeldExceed"
                  :before-upload="beforeUpload"
                  :on-preview="imgPreview"
                >
                  <i slot="default" class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </div>
          <el-col :span="8">
            <el-form-item label="结算卡类型:" prop="cardDTO.balanceAccType">
              <el-select
                size="small"
                v-model="alterForm.cardDTO.balanceAccType"
                :disabled="isAlterDisabledShow"
                placeholder="请选择结算卡类型"
              >
                <el-option
                  v-for="item in balanceAccTypeOptions"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="开户行省市区:"
              prop="cardDTO.accProvinceCityArea"
            >
              <el-cascader
                v-if="isShow"
                @change="provCityAreaChange"
                v-model="alterForm.cardDTO.accProvinceCityArea"
                :options="provinceCityAreaOptions"
                :props="provinceCityAreaProps"
                placeholder="请选择开户行省市区"
                clearable
                filterable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户行名称:" prop="cardDTO.bankType">
              <el-select
                size="small"
                @change="bankTypeChange"
                v-model="alterForm.cardDTO.bankType"
                filterable
                placeholder="请输入开户行名称"
              >
                <el-option
                  v-for="item in bankNameOptions"
                  :key="item.bankType"
                  :label="item.bankName"
                  :value="item.bankType"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户支行名称:" prop="cardDTO.openAccBankType">
              <el-select
                size="small"
                v-model="alterForm.cardDTO.openAccBankType"
                filterable
                placeholder="请输入开户支行名称"
              >
                <el-option
                  v-for="item in accBankNameOptions"
                  :key="item.openAccBankType"
                  :label="item.openAccBankName"
                  :value="item.openAccBankType"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行预留手机号:" prop="cardDTO.bankMobile">
              <el-input
                type="tel"
                v-model="alterForm.cardDTO.bankMobile"
                placeholder="请输入银行预留手机号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div
        v-if="
          alterForm.rpiNo && alterForm.changeType === '2' && alterForm.rateDTO
        "
      >
        <el-row :gutter="20" v-if="isBeforeAlter">
          <el-col :span="24">
            <el-divider content-position="left">变更前</el-divider>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="扫码费率（单位：%）:"
              prop="rateDTO.oldCodeScanningRate"
            >
              <span>{{ alterForm.rateDTO.oldCodeScanningRate }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="alterForm.rateDTO.codeAdvanceRate">
            <el-form-item
              label="垫资费费率（单位：%）:"
              prop="rateDTO.oldCodeAdvanceRate"
            >
              <span>{{ alterForm.rateDTO.oldCodeAdvanceRate }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" v-if="isBeforeAlter">
            <el-divider content-position="left">变更后</el-divider>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="扫码费率（单位：%）:"
              prop="rateDTO.codeScanningRate"
            >
              <el-input-number
                size="small"
                v-model="alterForm.rateDTO.codeScanningRate"
                :precision="4"
                :step="0.0001"
                :min="0"
                :max="1"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="alterForm.rateDTO.codeAdvanceRate">
            <el-form-item
              label="垫资费费率（单位：%）:"
              prop="rateDTO.codeAdvanceRate"
            >
              <el-input-number
                size="small"
                v-model="alterForm.rateDTO.codeAdvanceRate"
                :precision="4"
                :step="0.0001"
                :min="0"
                :max="1"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </div>
</template>

<script>
import {
  getDetail,
  getDetailPlus,
} from "@/api/rb-merchant/merrecord/mer_change_record";
import {
  getFirstBankList,
  getSecondBankList,
} from "@/api/rb-merchant/posinfo/pos_info";
import { getDictionary, getRegion } from "@/api/system/dict";
import { uploadPrivate } from "@/api/system/oss";
import canvasImg from '@/util/canvasImg';

export default {
  mixins: [canvasImg],
  props: {
    isAlterDisabledShow: {
      type: Boolean,
      default: false,
    },
    isBeforeAlter: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      imgShow:false,
      imgUrlList:[],
      labelData: {
        merchantTitle: "商户信息",
        contentTitle: "",
      },
      process: {},
      alterForm: {
        cardDTO: {
          openAccProvinceCode:  "",
          openAccCityCode:  "",
          openAccAreaCode:  "",
        }
      },
      alterRules: {
        rpiNo: [{ required: true, message: "请输入商户号", trigger: "blur" }],
        rpiName: [
          { required: true, message: "请输入门头名称", trigger: "blur" },
        ],
        changeType: [
          { required: true, message: "请选择变更类型", trigger: "blur" },
        ],
        "basicDTO.userShortName": [
          { required: true, message: "请输入商户简称", trigger: "blur" },
        ],
        "basicDTO.contactsName": [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
        ],
        "basicDTO.contactsPhone": [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
        "basicDTO.contactsAddr": [
          { required: true, message: "请输入联系人通讯地址", trigger: "blur" },
        ],
        "cardDTO.balanceAccType": [
          { required: true, message: "请输入结算卡类型", trigger: "blur" },
        ],
        "cardDTO.accountFront": [
          { required: true, message: "请上传银行卡正面", trigger: "blur" },
        ],
        "cardDTO.accountReverse": [
          { required: true, message: "请上传银行卡反面", trigger: "blur" },
        ],
        "cardDTO.ecardFront": [
          {
            required: true,
            message: "请上传非法人身份证正面",
            trigger: "blur",
          },
        ],
        "cardDTO.ecardReverse": [
          {
            required: true,
            message: "请上传非法人身份证反面",
            trigger: "blur",
          },
        ],
        "cardDTO.openPermit": [
          { required: true, message: "请上传开户许可证", trigger: "blur" },
        ],
        "cardDTO.bankType": [
          { required: true, message: "请输入开户行名称", trigger: "blur" },
        ],
        "cardDTO.openAccBankType": [
          { required: true, message: "请输入开户支行名称", trigger: "blur" },
        ],
        "cardDTO.accProvinceCityArea": [
          { required: true, message: "请选择开户行省市区", trigger: "blur" },
        ],
        "cardDTO.bankMobile": [
          { required: true, message: "请输入银行预留手机号", trigger: "blur" },
        ],
        "rateDTO.codeScanningRate": [
          { required: true, message: "请输入扫码费率", trigger: "blur" },
        ],
      },
      changeTypeOptions: [],
      balanceAccTypeOptions: [],
      provinceCityAreaOptions: [],
      bankNameOptions: [],
      accBankNameOptions: [],
      provinceCityAreaProps: {
        label: "name",
        value: "code",
        lazy: true,
        lazyLoad(node, resolve) {
          let stop_level = 2;
          let level = node.level;
          let data = node.data || {};
          let code = data.code;
          let list = [];
          let callback = () => {
            resolve(
              (list || []).map((ele) => {
                return Object.assign(ele, {
                  leaf: level >= stop_level,
                });
              })
            );
          };
          if (level == 0) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 1) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 2) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else {
            callback();
          }
        },
      },
      accountFrontList: [],
      accountReverseList: [],
      openPermitList: [],
      ecardFrontList: [],
      ecardReverseList: [],
      isShow: true,
    };
  },
  watch: {},
  created() {
    this.doGetDicts();
  },
  methods: {
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    /* 字典 */
    doGetDicts() {
      getDictionary({ code: "change_type" }).then((res) => {
        this.changeTypeOptions = res.data.data;
      });
      getDictionary({ code: "balance_acc_type" }).then((res) => {
        this.balanceAccTypeOptions = res.data.data;
      });
      getFirstBankList("-1", "-1").then((res) => {
        this.bankNameOptions = res.data.data.records;
      });
    },
    /* 通过商户号以及变更类型 获取商户信息 */
    getMerhchantDetails(rpiNo, changeType) {
      getDetail(rpiNo, changeType).then(
        (res) => {
          this.alterForm = res.data.data;
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* 通过id 获取商户信息 */
    getMerhchantDetailPlus(changeNo) {
      getDetailPlus(changeNo).then(
        (res) => {
          this.alterForm = res.data.data;
          // this.$emit('getDetailReject', res.data.data.links);
          if (this.alterForm.changeType == "1") {
            this.alterForm.cardDTO.accProvinceCityArea = [
              this.alterForm.cardDTO.openAccProvinceCode,
              this.alterForm.cardDTO.openAccCityCode,
              this.alterForm.cardDTO.openAccAreaCode,
            ];
            if (this.alterForm.cardDTO.balanceAccType == "3" || this.alterForm.cardDTO.balanceAccType == "11") {
              this.accountFrontList.length == 0 && this.alterForm.cardDTO.accountFrontUrl ? this.accountFrontList.push({url: this.alterForm.cardDTO.accountFrontUrl || ""}) : this.accountFrontList;
              this.accountReverseList.length == 0 && this.alterForm.cardDTO.accountReverseUrl ? this.accountReverseList.push({url: this.alterForm.cardDTO.accountReverseUrl || ""}) : this.accountReverseList;
            }
            if (this.alterForm.cardDTO.balanceAccType == "3") {
              this.ecardFrontList.length == 0 && this.alterForm.cardDTO.ecardFrontUrl ? this.ecardFrontList.push({url: this.alterForm.cardDTO.ecardFrontUrl || ""}) : this.ecardFrontList;
              this.ecardReverseList.length == 0 && this.alterForm.cardDTO.ecardReverseUrl ? this.ecardReverseList.push({url: this.alterForm.cardDTO.ecardReverseUrl || ""}) : this.ecardReverseList;
            }
            if (this.alterForm.cardDTO.balanceAccType == "21") {
              this.openPermitList.length == 0 && this.alterForm.cardDTO.openPermitUrl ? this.openPermitList.push({url: this.alterForm.cardDTO.openPermitUrl || ""}) : this.openPermitList;
            }
            getSecondBankList(
              "-1",
              "-1",
              this.alterForm.cardDTO.openAccCityCode,
              this.alterForm.cardDTO.bankType
            ).then((res) => {
              this.accBankNameOptions = res.data.data.records;
            });
          }
          this.$emit('getDetailReject', res.data.data.comment);
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* 商户号 */
    rpiNoChange(e) {
      if (e && this.alterForm.changeType) {
        this.getMerhchantDetails(e, this.alterForm.changeType);
      }
    },
    /* 变更类型 */
    alterChange(e) {
      this.labelData.contentTitle = this.changeTypeOptions[e].dictValue;
      if (e && this.alterForm.rpiNo) {
        this.getMerhchantDetails(this.alterForm.rpiNo, e);
      }
    },
    /* 开户行 change */
    bankTypeChange(val) {
      this.accBankNameOptions = [];
      if (val && this.alterForm.cardDTO.accProvinceCityArea) {
        this.alterForm.cardDTO.openAccBankType = "";
        getSecondBankList(
          "-1",
          "-1",
          this.alterForm.cardDTO.accProvinceCityArea[1],
          val
        ).then((res) => {
          this.accBankNameOptions = res.data.data.records;
        });
      }
    },
    /* 开户行省市区 change */
    provCityAreaChange(val) {
      this.accBankNameOptions = [];
      if (val && this.alterForm.cardDTO.bankType) {
        this.alterForm.cardDTO.openAccBankType = "";
        getSecondBankList(
          "-1",
          "-1",
          val[1],
          this.alterForm.cardDTO.bankType
        ).then((res) => {
          this.accBankNameOptions = res.data.data.records;
        });
      }
    },
    /* 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传 */
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 文件超出个数限制时的钩子 */
    handHeldExceed() {
      this.$message.error("只能上传一张图片哦~");
    },
    /* 银行卡正面上传 */
    httpAccountFrontRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.alterForm.cardDTO.accountFront = res.data.data.name;
        this.$refs.alterForm.validateField("cardDTO.accountFront");
      });
    },
    /* 银行卡正面删除 */
    accountFrontRemove(file, fileList) {
      this.accountFrontList = fileList;
      this.alterForm.cardDTO.accountFront = "";
    },
    beforeaccountFrontRemove() {
      return this.$confirm(`确定移除银行卡正面照片？`);
    },
    /* 银行卡反面上传 */
    httpAccountReverseRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.alterForm.cardDTO.accountReverse = res.data.data.name;
        this.$refs.alterForm.validateField("cardDTO.accountReverse");
      });
    },
    /* 银行卡反面删除 */
    accountReverseRemove(file, fileList) {
      this.accountReverseList = fileList;
      this.alterForm.cardDTO.accountReverse = "";
    },
    beforeaccountReverseRemove() {
      return this.$confirm(`确定移除银行卡反面照片？`);
    },
    /* 开户许可证上传 */
    httpOpenPermitRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.alterForm.cardDTO.openPermit = res.data.data.name;
        this.$refs.alterForm.validateField("cardDTO.openPermit");
      });
    },
    /* 开户许可证删除 */
    openPermitRemove(file, fileList) {
      this.openPermitList = fileList;
      this.alterForm.cardDTO.openPermit = "";
    },
    beforeopenPermitRemove() {
      return this.$confirm(`确定移除开户许可证照片？`);
    },
    /* 非法人身份证正面上传 */
    httpEcardFrontRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.alterForm.cardDTO.ecardFront = res.data.data.name;
        this.$refs.alterForm.validateField("cardDTO.ecardFront");
      });
    },
    /* 非法人身份证正面删除 */
    ecardFrontRemove(file, fileList) {
      this.ecardFrontList = fileList;
      this.alterForm.cardDTO.ecardFront = "";
    },
    beforeecardFrontRemove() {
      return this.$confirm(`确定移除非法人身份证正面照片？`);
    },
    /* 非法人身份证反面上传 */
    httpEcardReverseRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.alterForm.cardDTO.ecardReverse = res.data.data.name;
        this.$refs.alterForm.validateField("cardDTO.ecardReverse");
      });
    },
    /* 非法人身份证反面删除 */
    ecardReverseRemove(file, fileList) {
      this.ecardReverseList = fileList;
      this.alterForm.cardDTO.ecardReverse = "";
    },
    beforeecardReverseRemove() {
      return this.$confirm(`确定移除非法人身份证反面照片？`);
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-box {
  // padding: 20px 40px 20px 0;
  padding: 20px;
  .basic-box-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }
}
.alter-title {
  font-size: 16px;
  font-weight: bold;
  margin-left: 20px;
}

.upload-img {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  margin: 0 8px 8px 0;
  display: inline-block;
}
</style>